<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>测试</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="应用">
        <div @click="单击">点击事件</div>
        <div @dblclick="双击">双击事件</div>
        <input type="text" @focus="聚焦" @blur="失焦" @change="改变" @select="选中" />
        <div @mousedown="鼠下">鼠标按下</div>
        <div @mouseup="鼠上">鼠标抬起</div>
        <div @mousemove="鼠移">鼠标移动</div>
        <div @mouseout="鼠出">鼠标移出</div>
        <input type="text" @keydown="键下" @keyup="键上" />
    </div>

    <script>
        const 应用 = {
            setup: () => {
                const 单击 = () => console.log('单击事件');
                const 双击 = () => console.log('双击事件');
                const 聚焦 = () => console.log('聚焦事件');
                const 失焦 = () => console.log('失焦事件');
                const 改变 = () => console.log('改变事件');
                const 选中 = () => console.log('选中事件');
                const 鼠下 = () => console.log('鼠下事件');
                const 鼠上 = () => console.log('鼠上事件');
                const 鼠移 = () => console.log('鼠移事件');
                const 鼠出 = () => console.log('鼠出事件');
                const 键下 = () => console.log('键下事件');
                const 键上 = () => console.log('键上事件');

                return {
                    单击,
                    双击,
                    聚焦,
                    失焦,
                    改变,
                    选中,
                    鼠下,
                    鼠上,
                    鼠移,
                    鼠出,
                    键下,
                    键上,
                };
            },
        };

        Vue.createApp(应用).mount('#应用');
    </script>
</body>
</html>
